<template>
    <div>
        <van-nav-bar title="我的订单" />
        <van-tabs v-model:active="active" @change="bh">
            <van-tab title="全部"></van-tab>
            <van-tab title="已付款"></van-tab>
            <van-tab title="待付款"></van-tab>
        </van-tabs>
        <div v-for="item in fl">
            <van-card :title="item.product_code">
                <template #desc>
                    <div>下单时间：{{ item.create_time }}</div>
                    <div>订单号：{{ item.orderId }}</div>
                </template>
                <template #price>
                    <div style="color: #f00;font-size: 16px;">￥{{ item.totalPrice }}</div>
                </template>
                <template #footer>
                    <van-tag plain type="primary">{{ item.status == 1 ? '已支付' : '未支付' }}</van-tag>
                </template>
            </van-card>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { listApi } from '../../request/api'
const ol = ref([])
const fl = ref([])
listApi(localStorage.getItem('username')).then(res => {
    ol.value = res.data.data
    fl.value = ol.value
})
const bh = (index) => {
    if (index == 0) {
        fl.value = ol.value
    }
    if (index == 1) {
        fl.value = ol.value.filter(item => item.status == index)
    }
    if (index == 2) {
        fl.value = ol.value.filter(item => item.status == index)
    }
}
onMounted(() => [
    bh(0)
])
</script>

<style lang="scss" scoped></style>